<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                background: #333;
            }

            .map {
                width: 747px;
                height: 617px;
                background: url(../images/map.png);
                margin: 0 auto;
                position: relative;
            }

            .bj {
                position: absolute;
                top: 227px;
                left: 540px;
            }
            .tb {
                position: absolute;
                top: 498px;
                left: 657px;
            }
            .gz {
                position: absolute;
                top: 525px;
                left: 560px;
            }

            .dott {
                width: 10px;
                height: 10px;
                background: skyblue;
                border-radius: 50%;
            }

            .bj div[class^="pu"],.gz div[class^="pu"],.tb div[class^="pu"] {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 10px;
                height: 10px;
                box-shadow: 0 0 12px rgb(0, 157, 253);
                animation: move 1.2s linear infinite;
                border-radius: 50%;
            }

            .bj div.pu2,.gz div.pu2,.tb div.pu2 {
                animation-delay: 0.4s;
            }

            .bj div.pu3,.tb div.pu3,.gz div.pu3 {
                animation-delay: 0.8s;
            }

            @keyframes move {
                0% {}

                50% {
                    width: 40px;
                    height: 40px;
                    opacity: 1;
                }

                100% {
                    width: 70px;
                    height: 70px;
                    opacity: 0;
                }

            }
        </style>
    </head>

    <body>
        <div class="map">
            <div class="bj">
                <div class="dott"></div>
                <div class="pu1"></div>
                <div class="pu2"></div>
                <div class="pu3"></div>
            </div>

            <div class="gz">
                <div class="dott"></div>
                <div class="pu1"></div>
                <div class="pu2"></div>
                <div class="pu3"></div>
            </div>

            <div class="tb">
                <div class="dott"></div>
                <div class="pu1"></div>
                <div class="pu2"></div>
                <div class="pu3"></div>
            </div>

        </div>
    </body>

</html>